<!DOCTYPE html>
<html>

<head>
    <title>文本播放器 ver0.8（核心功能版修正）</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }

        #main-container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        #content {
            padding: 20px;
            line-height: 1.6;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 20px;
            min-height: 150px;
            background-color: #000;
            color: #ffff00;
        }

        #recitation-section {
            margin-bottom: 20px;
        }

        #recitationInput {
            width: 100%;
            height: 150px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            resize: vertical;
            margin-bottom: 10px;
        }

        #reciteResult {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            min-height: 50px;
            background-color: #f9f9f9;
        }

        .control-group {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        button {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            background-color: #007BFF;
            color: #fff;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #0056b3;
        }

        .jump-buttons {
            display: flex;
            gap: 10px;
        }

       .missing {
            color: green;
        }

       .extra {
            color: red;
        }
    </style>
</head>

<body>
    <div id="main-container">
        <div id="content">请加载学习文本</div>

        <div id="recitation-section">
            <textarea id="recitationInput" placeholder="请输入背诵内容"></textarea>
            <button onclick="checkRecitation()">检查背诵</button>
            <div id="reciteResult"></div>
        </div>

        <div class="control-group">
            <div class="jump-buttons">
                <button onclick="jumpPrevious()">上一段</button>
                <button onclick="jumpNext()">下一段</button>
            </div>
            <input type="text" id="jumpTo" placeholder="输入段落编号跳转">
            <button onclick="jump()">跳转</button>
            <input type="file" id="fileInput" accept=".txt" style="display: none">
            <button onclick="document.getElementById('fileInput').click()">加载文件</button>
        </div>

        <div class="control-group">
            <button onclick="togglePlay()">播放</button>
            <button onclick="stopPlay()">停止</button>
        </div>
    </div>

    <script>
        let segments = [];
        let currentIndex = 0;
        let isPlaying = false;
        let timer = null;

        document.getElementById('fileInput').addEventListener('change', function (e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    segments = e.target.result.split('\n').map(line => line.trim()).filter(line => line);
                    currentIndex = 0;
                    updateDisplay();
                };
                reader.readAsText(file);
            }
        });

        function updateDisplay() {
            const contentDiv = document.getElementById('content');
            const currentText = segments[currentIndex] || '请加载有效文本';
            contentDiv.innerHTML = `
                <div style="color: #666; margin-bottom: 10px">段落 ${currentIndex + 1}</div>
                ${currentText}
            `;
        }

        function checkRecitation() {
            const input = document.getElementById('recitationInput').value.trim();
            const original = segments[currentIndex] || '';
            const resultDiv = document.getElementById('reciteResult');

            let output = '';
            let inputIndex = 0;

            for (let i = 0; i < original.length; i++) {
                if (inputIndex < input.length && original[i] === input[inputIndex]) {
                    output += original[i];
                    inputIndex++;
                } else {
                    output += `<span class="missing">${original[i]}</span>`;
                }
            }

            while (inputIndex < input.length) {
                output += `<span class="extra">${input[inputIndex]}</span>`;
                inputIndex++;
            }

            resultDiv.innerHTML = `
                <div style="color: #666; margin-bottom: 10px">原文对比</div>
                ${output}
            `;
        }

        function jumpNext() {
            if (currentIndex < segments.length - 1) {
                currentIndex++;
                updateDisplay();
                document.getElementById('reciteResult').innerHTML = '';
            }
        }

        function jumpPrevious() {
            if (currentIndex > 0) {
                currentIndex--;
                updateDisplay();
                document.getElementById('reciteResult').innerHTML = '';
            }
        }

        function jump() {
            const target = document.getElementById('jumpTo').value.trim();
            if (/^\d+$/.test(target)) {
                const n = parseInt(target);
                const targetLabel = `(${n}, ${n + 1}, ${n + 2})`;
                const index = segments.findIndex(s => s.startsWith(targetLabel));
                if (index >= 0) {
                    currentIndex = index;
                    updateDisplay();
                    document.getElementById('reciteResult').innerHTML = '';
                } else {
                    alert('未找到指定段落');
                }
            } else {
                alert('请输入有效的数字编号');
            }
        }

        function togglePlay() {
            isPlaying = !isPlaying;
            if (isPlaying) {
                playNext();
            } else {
                clearTimeout(timer);
            }
        }

        function playNext() {
            if (isPlaying && currentIndex < segments.length - 1) {
                currentIndex++;
                updateDisplay();
                timer = setTimeout(playNext, 2000);
            }
        }

        function stopPlay() {
            isPlaying = false;
            clearTimeout(timer);
        }
    </script>
</body>

</html>    